<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-card class="box-card">
        <el-form-item label="私钥">
          <el-input v-model="form.priKey"></el-input>
        </el-form-item>
        <el-form-item label="公钥">
          <el-input v-model="form.pubKey"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="genKey()">重新生成</el-button>
        </el-form-item>
      </el-card>
      <el-card class="box-card" style="margin-top: 20px;">
        <div slot="header" class="clearfix">
          <span>加密</span>
        </div>
        <div>
          <el-form-item label="原文">
          <el-input type="textarea" v-model="form.src"></el-input>
        </el-form-item>
        <el-form-item label="密文">
          <el-input type="textarea" v-model="form.toEnc"></el-input>
        </el-form-item>
        </div>
      </el-card>
      <el-card class="box-card"  style="margin-top: 20px;">
        <div slot="header" class="clearfix">
          <span>解密</span>
        </div>
        <div>
          <el-form-item label="密文">
          <el-input type="textarea" v-model="form.enc"></el-input>
        </el-form-item>
        <el-form-item label="原文">
          <el-input type="textarea" v-model="form.toSrc"></el-input>
        </el-form-item>
        </div>
      </el-card>
      <el-card class="box-card"  style="margin-top: 20px;">
        <div slot="header" class="clearfix">
          <span>签名</span>
        </div>
        <div>
          <el-form-item label="数据">
          <el-input type="textarea" v-model="form.data"></el-input>
        </el-form-item>
        <el-form-item label="签名">
          <el-input type="textarea" v-model="form.sign"></el-input>
        </el-form-item>
        </div>
      </el-card>
      <el-card class="box-card"  style="margin-top: 20px;">
        <div slot="header" class="clearfix">
          <span>验签</span>
        </div>
        <div>
          <el-form-item label="数据">
            <el-input type="textarea" v-model="form.data4Verify"></el-input>
          </el-form-item>
          <el-form-item label="签名">
            <el-input type="textarea" v-model="form.sign4Verify"></el-input>
          </el-form-item>
          <el-form-item label="结果">
            <el-input type="textarea" v-model="form.verifyResult"></el-input>
          </el-form-item>
        </div>
      </el-card>
  </el-form>
</div>
</template>

<script>
import { sm2GenKey, sm2Dec, sm2Enc, sm2Signature, sm2Verify } from '../../utils/crypto_sm2'
export default {
  name: 'Sm2Tool',
  components: {},
  props: {},
  data () {
    return {
      form: {
        priKey: '',
        pubKey: '',
        src: '',
        toEnc: '',
        enc: '',
        toSrc: '',
        data: '',
        sign: '',
        data4Verify: '',
        sign4Verify: '',
        verifyResult: ''
      }
    }
  },
  watch: {
    'form.src': {
      handler (newValue, oldVal) {
        this.enc()
      },
      deep: false // 深度监听
    },
    'form.enc': {
      handler (newValue, oldVal) {
        this.dec()
      },
      deep: false // 深度监听
    },
    'form.data': {
      handler (newValue, oldVal) {
        this.sign()
      },
      deep: false // 深度监听
    },
    'form.data4Verify': {
      handler (newValue, oldVal) {
        this.verify()
      },
      deep: false // 深度监听
    },
    'form.sign4Verify': {
      handler (newValue, oldVal) {
        this.verify()
      },
      deep: false // 深度监听
    }
  },
  computed: {},
  methods: {
    genKey () {
      let keyPair = sm2GenKey()
      this.form.priKey = keyPair.priKey
      this.form.pubKey = keyPair.pubKey
    },
    enc () {
      if (this.form.pubKey && this.form.src) {
        this.form.toEnc = sm2Enc(this.form.src, this.form.pubKey)
      }
    },
    dec () {
      if (this.form.priKey && this.form.enc) {
        try {
          let src = sm2Dec(this.form.enc, this.form.priKey)
          if (src) {
            this.form.toSrc = src
          } else {
            this.form.toSrc = '解密失败'
          }
        } catch (error) {
          this.form.toSrc = '解密失败'
          console.error(error)
        }
      }
    },
    sign () {
      if (this.form.priKey && this.form.data) {
        this.form.sign = sm2Signature(this.form.data, this.form.priKey)
      }
    },
    verify () {
      if (this.form.pubKey && this.form.data4Verify && this.form.sign4Verify) {
        this.form.verifyResult = sm2Verify(this.form.data4Verify, this.form.sign4Verify, this.form.pubKey)
      }
    }
  },
  created () {},
  mounted () {
    this.genKey()
  }
}
</script>
<style scoped>
</style>
